// import './index.css'
// import './test.scss'
// var greeter = require("./Greeter.js");
// document.getElementById('root').appendChild(greeter())
import Clay from "@csii/vx-clay";
import demo1 from "./demo.clay";
import icon from "./icon.js";
Clay.series("ui-test", icon);
new Clay({
  el: document.getElementById("root"),
  render: demo1,
  data() {
    return {
      select: -1,
      list: [
        {
          key: "A",
          value: 88,
        },
        {
          key: "B",
          value: 99,
        },
        {
          key: "C",
          value: 77,
        },
        {
          key: "D",
          value: 42,
        },
      ],
    };
  },
  methods: {
    doit(target) {
      // console.log(target)
      this.select = target.subRegion;
      // console.log(this.select,typeof this.select)
      this.$setHover({
        title: target.attr.data[target.subRegion].key,  // 标题
        x: target.left,  // 悬浮的位置
        y: target.top,
        show: true,  // 是否显示悬浮
        // background: string,  // 背景色
        width: 80, // 悬浮的宽
        // color: string,  // 文字颜色
        // "title-size": number, // 标题文字大小
        // "item-size": number, // 子条目文字大小
        items: [{  // 条目
            color: 'red',  // 圆颜色
            content:target.attr.data[target.subRegion].value,  // 当前条目内容
            radius: 6  // 圆半径
        }]
    });
    },
  },
  mounted() {
    this.$bind("mousemove",(target)=>{
        if(target.subRegion==null){
            this.select = "-1";
        }
    });
  },
});
